<template>
  <div class="rank">
    <scroll :data="rankList" ref="rankList" class="top-list">
      <ul>
        <li class="toplist-item" v-for="(item, index) in rankList" :key='index'>
          <div class="item-left">
            <img class="item-img" v-lazy="item.picUrl" alt="">
          </div>
          <div class="item-right">
            <h3 class="item-tit">{{item.topTitle}}</h3>
            <p class="item-song" v-for="(itemSong, inx) in item.songList" :key="inx">
              <span> {{inx+1}}</span>
              <span>{{itemSong.songname}}</span>
              <span>-{{itemSong.singername}}</span>
            </p>
          </div>
        </li>
      </ul>
      <div class="loading-container" v-show="!rankList.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
import {getTopList} from '@/api/rank'
import {ERR_OK} from '@/api/config'
import Scroll from '@/base/scroll/scroll'
import Loading from '@/base/loading/loading'
export default {
  components: {
    Scroll,
    Loading
  },
  props: {},
  data() {
    return {
      rankList: []
    }
  },
  watch: {},
  computed: {
  },
  methods: {
    _getRankList() {
      getTopList().then((ret) => {
        if (ret.code === ERR_OK) {
          this.rankList = ret.data.topList
        }
      })
    }
  },
  created() {
    this._getRankList()
  },
  mounted() {}
}
</script>
<style lang="stylus" scoped>
@import '~@/common/stylus/variable.styl'
.loading-container
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
.rank
  position: fixed
  width: 100%
  top: 88px
  bottom: 0
  padding: 10px
  box-sizing: border-box
  .top-list
    position: relative
    overflow: hidden
    height: 100%
    .toplist-item
      display: flex
      margin-bottom: 10px
      font-size: $font-size-small
      background: $color-highlight-background
      color: $color-text-d
      .item-left
        width: 100px
        height: 100px
        background: #ccc
        .item-img
          width: 100px
          height: 100px
      .item-right
        flex: 1
        margin: 0 10px 0 15px
        background: $color-highlight-background
        .item-tit
          font-size: 14px
          margin: 10px 0
        .item-song
          margin-bottom: 8px
</style>